import React from 'react';
import { observer, useAsObservableSource } from 'mobx-react-lite';
// aa
import img from '@/assets/big_img.jpg';
import styles from './index.less';

const TestCom = (props) => {

  console.log('props', props);

  const { text, handleChangeOutputParams, flow1, handleRunEvent, changeEventParams } = props;

  React.useEffect(() => {
    if(!flow1) return;
    // const { flowCode} = flow1 || {};
    // handleRunEvent(flowCode);
    console.log('effect text change', text);
  }, []);

  const [count, setCount] = React.useState(0);

  const addCount = React.useCallback(() => {
    setCount(c => c + 1);
  }, [setCount]);

  React.useEffect(() => {
    handleChangeOutputParams({ property: 'output1', data: '初始值' })
  }, []);

  return (
    <div>
      <p>自定义组件 from custom-test</p>
      <p>动态 props from 取值 <span style={{ color: 'red' }}>{text}</span></p>
      {/* <p>动态 props from 修改的出参值 <span style={{ color: 'red' }}>{outText1}</span></p> */}
      <div className={styles.text} onClick={addCount}>
        test custom component: {count}
      </div>
      <button onClick={() => handleRunEvent(flow1?.flowCode)}>调用事件流</button>
      <button onClick={() => changeEventParams('text', 'hhaha')}>改下入参 text</button>
      <span onClick={() => handleChangeOutputParams({ property: 'output1', data: '出参aaaaaa' })}>修改出参</span>
      <br />
      <img src={img} alt="img" style={{ width: 800 }} />
    </div>
  );
};

export default TestCom;
